/* eslint-disable react/prop-types */
import React from 'react';
import { Form, Input, Switch, Button, Radio, TreeSelect, message } from 'antd';
import { withRouter } from 'react-router-dom';
import Api from '@/api/index'

const { TreeNode } = TreeSelect;

class MenuForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            treeData: [],
            isVerify: false
        }
    }

    componentDidMount() {
        //获取菜单列表
        this.getMenuList()
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const { status, ...other } = values;
                Api.createMenu({ ...other, status: status ? 1 : 0 }).then(res => {
                    if (res.code == 200) {
                        message.success('保存成功')
                        this.props.history.push({ pathname: '/system/menu' })
                    }
                })
            }
        });
    };
    //菜单列表
    getMenuList = () => {
        Api.getMenuList().then(res => {
            if (res.code == 200) {
                this.setState({ treeData: res.data.result })
            }
        })
    }
    renderTree = (treeData) => {
        return treeData.map((item) => {
            if (item.children && Array.isArray(item.children)) {
                return (
                    <TreeNode title={item.moduleName} key={item.id} value={item.id}>
                        {this.renderTree(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode title={item.moduleName} key={item.id} value={item.id} />;
        });
    }

    //上级菜单
    onPidChange = value => {
        const { setFieldsValue } = this.props.form;
        setFieldsValue({ pid: value[0] })
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const { treeData } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 2,
                },
            },
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="上级菜单">
                    {getFieldDecorator('pid', {})(<TreeSelect
                        style={{ width: '80%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择上级菜单"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.onPidChange}
                    >
                        {this.renderTree(treeData)}
                    </TreeSelect>)}
                    <span style={{ color: '#787878', paddingLeft: '12px' }}>默认根节点</span>
                </Form.Item>
                <Form.Item label="菜单名称">
                    {getFieldDecorator('moduleName', {
                        rules: [
                            {
                                required: true,
                                message: '请输入菜单名称',
                            },
                        ],
                    })(<Input placeholder="菜单名称" />)}
                </Form.Item>
                <Form.Item label="菜单类型">
                    {getFieldDecorator('type', {
                        rules: [
                            {
                                required: true,
                                message: '请输入菜单名称',
                            },
                        ],
                    })(<Radio.Group name="radiogroup">
                        <Radio value={1}>目录</Radio>
                        <Radio value={2}>菜单</Radio>
                        <Radio value={3}>按钮</Radio>
                    </Radio.Group>)}
                </Form.Item>
                <Form.Item label="权限标识">
                    {getFieldDecorator('actionName', {
                        rules: [
                            {
                                required: true,
                                message: '请输入权限标识',
                            },
                        ],
                    })(<Input placeholder="权限标识" />)}
                </Form.Item>
                <Form.Item label="平台名称">
                    {getFieldDecorator('plantform', {})(<Input placeholder="平台名称" />)}
                </Form.Item>
                <Form.Item label="路径地址">
                    {getFieldDecorator('path', {
                        rules: [
                            {
                                required: true,
                                message: '请输入菜单路径',
                            },
                        ],
                    })(<Input placeholder="菜单路径" />)}
                </Form.Item>
                <Form.Item label="菜单状态">
                    {getFieldDecorator('status', { valuePropName: 'checked' })(<Switch />)}
                </Form.Item>
                <Form.Item label="图标">
                    {getFieldDecorator('icon', {})(<Input placeholder="图标" />)}
                </Form.Item>
                <Form.Item label="排序">
                    {getFieldDecorator('sort', {})(<Input placeholder="排序" />)}
                </Form.Item>

                <Form.Item {...tailFormItemLayout} style={{ marginTop: '30px', textAlign: 'center' }}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(withRouter(MenuForm));
